<template>
  <div class="hello">
    <el-table v-loading="loading"
    :data="list"
    style="width: 100%">
    <el-table-column label="日期"
      width="180">
      <!-- 作用域插槽 -->
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column label="姓名"
      width="180">
      <template slot-scope="scope">
      
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
       
        
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        
        <!-- 气泡确认框  里面的内容需要添加slot 插槽 -->
        <!--  @click="handleDelete(scope.$index, scope.row)" -->
        <el-popconfirm @cancel="cancel" title="确定删除嘛？">
           <el-button 
          size="mini"
          slot="reference"
          type="danger"
         >删除</el-button>
        </el-popconfirm>
       
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
// 加载中的进度条
import NproGress from "nprogress"
export default {
 
  //解决异步 回调函数 promise generator（属于微任务） async
  // async created(){
  //   await this.init(),
  //     this.loading = false
  // },
  created() {
    // 开启加载中
    NproGress.start()
    this.init() 
    // 关闭
    //  NproGress.done()
     
   },
  computed: {
      ...mapState('crud',['list','loading'])
    },
  methods: {
      ...mapActions('crud',['init']),
      handleEdit(index, row) {
        console.log(index, row);
    },
      //取消 删除 
    cancel(index, row) {
        this.$message("取消删除")
        console.log(index, row);
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
